<template>
  <mu-container >
    <mu-tabs :value.sync="active1" inverse color="secondary" text-color="rgba(0, 0, 0, .54)"  center>
      <mu-tab>登 录</mu-tab>
      <mu-tab>注 册</mu-tab>
    </mu-tabs>
    <div v-if="active1 === 0">
      <mu-container>
        <mu-form ref="loginForm" :model="loginForm" >
          <mu-form-item label="手机号" prop="phone" :rules="phoneRules">
            <mu-text-field v-model="loginForm.phone" prop="phone"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="密码" prop="password" :rules="passwordRules">
            <mu-text-field type="password" v-model="loginForm.password" prop="password"></mu-text-field>
          </mu-form-item>
          <mu-form-item prop="isAgree" :rules="argeeRules">
            <mu-checkbox label="同意用户协议" v-model="loginForm.isAgree"></mu-checkbox>
          </mu-form-item>
          <mu-form-item class="center">
            <mu-button full-width color="primary" @click="login">登 录</mu-button>
          </mu-form-item>
        </mu-form>
      </mu-container>
    </div>
    <div v-if="active1 === 1">
<!--      <mu-container>-->
<!--        <mu-form ref="loginForm" :model="loginForm" class="mu-demo-form">-->
<!--          <mu-form-item label="手机号" prop="phone" :rules="phoneRules">-->
<!--            <mu-text-field v-model="loginForm.phone" prop="phone"></mu-text-field>-->
<!--          </mu-form-item>-->
<!--          <mu-form-item label="验证码" prop="phone" :rules="phoneRules">-->
<!--            <mu-text-field v-model="loginForm.phone" prop="phone">-->
<!--              <mu-button round color="success">发送验证码</mu-button>-->
<!--            </mu-text-field>-->
<!--          </mu-form-item>-->
<!--          <mu-form-item label="密码" prop="password" :rules="passwordRules">-->
<!--            <mu-text-field type="password" v-model="loginForm.password" prop="password"></mu-text-field>-->
<!--          </mu-form-item>-->
<!--          <mu-form-item label="确认密码" prop="password" :rules="passwordRules">-->
<!--            <mu-text-field type="password" v-model="loginForm.password" prop="password"></mu-text-field>-->
<!--          </mu-form-item>-->
<!--          <mu-form-item class="center">-->
<!--            <mu-button full-width color="primary" @click="login">注册</mu-button>-->
<!--          </mu-form-item>-->
<!--        </mu-form>-->
<!--      </mu-container>-->
    </div>
  </mu-container>
</template>

<script>
import { getToken,setToken } from '@/utils/auth'
export default {
  name: 'login',
  data () {
    return {
        active1: 0,

        phoneRules: [
            { validate: (val) => !!val, message: '必须填写手机号'},
            // { validate: (val) => val.length >= 11, message: '手机号长度大于11'}
        ],
        passwordRules: [
            { validate: (val) => !!val, message: '必须填写密码'},
            { validate: (val) => val.length >= 3 && val.length <= 10, message: '密码长度大于3小于10'}
        ],
        argeeRules: [{ validate: (val) => !!val, message: '必须同意用户协议'}],
        loginForm: {
            phone: '',
            password: '',
            isAgree: false
        }
    }
  },

  created(){
      let token = getToken();
      if (token != null && token != ''){
          this.$router.push({ path: '/redirect/home'})
      }
  },

  methods: {
      login () {
          this.$refs.loginForm.validate().then((result) => {
              if (result){
                  this.$store.dispatch('LoginByPhone', this.loginForm).then(()=>{
                      this.$router.push({ path: '/redirect/home'})
                  })
              }
          });
      },
  }
}
</script>

<style>
  .center{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
